<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 v-color123="'blue'" v-qqq>{{name}}</h1>
        <h2 v-color123 v-premission='10'>{{name}}</h2>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="./directive.js"></script>
<script>
    /* 
      全局自定义指令    局部自定义指令(组件)
      对应的函数中的this不是当前实例
    */
    Vue.directive('color123', function(el,obj){
      // 用了多少次 v-color123就触发多少次这个函数
      // el是使用这个指令的那个元素标签
      // obj 中的 value 对应的就是 指令后边跟的值；若指令后没有跟值，则 value不存在
      el.style.color = obj.value || 'red';
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰"
        },
        directives:{
          // 局部自定义指令  先用局部 再用全局
          color123(el,obj){
            el.style.color = 'yellow'
          }
        }
    });
</script>